<template>
	<div class="el-tree">
		<div class="el-tree_list el-tree_view">
			<div class="el-tree_item" v-for="(childs,index) in data" :key="index">
				<div class="el-tree_item_content" :class="{'is-select':_hasShowingChild(childs)}"
					@click="_onclick(childs)">
					<div class="el-tree_icon" :class="{activeIcon: _hasShowingChild(childs)}">
						<svg v-if="childs[defaultProps.children]" t="1659420807399" class="icon" viewBox="0 0 1024 1024"
							p-id="924" width="16" height="16">
							<path
								d="M676.992 449.621333a85.546667 85.546667 0 0 1 0 124.757334L391.509333 841.856a42.389333 42.389333 0 0 1-60.074666-2.069333 42.773333 42.773333 0 0 1 2.069333-60.309334L618.986667 512 333.504 244.522667a42.773333 42.773333 0 0 1-2.069333-60.309334 42.389333 42.389333 0 0 1 60.074666-2.069333l285.482667 267.477333z"
								p-id="925" fill="#B7BDC8"></path>
						</svg>
					</div>
					<div class="el-tree_label" :class="{activeText:_hasShowingChild(childs)}">
						{{childs[defaultProps.label]}}
					</div>
				</div>
				<el-collapse-transition>
					<div class="el-tree_item_children" v-if="_hasShowingChild(childs)">
						<el-tree :data="childs[defaultProps.children]" @node-click="_nodeclick"></el-tree>
					</div>
				</el-collapse-transition>
			</div>
		</div>
		<!-- B7BDC8 -->
	</div>
</template>

<script>
	// 引入折叠过度组件
	import CollapseTransition from "./utils/el-collapse-transition.js";
	export default {
		name: 'el-tree',
		components: {
			"el-collapse-transition": CollapseTransition,
		},
		props: {
			data: {
				type: Array,
				require: false,
				default () {
					return []
				}
			},
			defaultProps: {
				type: Object,
				require: false,
				default () {
					return {
						children: 'children',
						label: 'label',
						key: 'label'
					}
				}
			}
		},
		data() {
			return {
				key: null
			}
		},
		methods: {
			_onclick(data) {
				if (this.key === data[this.defaultProps.key]) {
					this.key = null;
					this.$emit('node-click', {
						node: data,
						selected: false // 节点选择状态
					})
				} else {
					this.key = data[this.defaultProps.key];
					this.$emit('node-click', {
						node: data,
						selected: true
					})
				}
			},
			_nodeclick(data) {
				this.$emit('node-click', data)
			},
			_hasShowingChild(data) {
				return data[this.defaultProps.label] === this.key;
			}
		}
	}
</script>

<style scoped lang="scss">
	.el-tree_list {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;

		.el-tree_item {
			width: 100%;
			cursor: pointer;

			.el-tree_item_children {
				margin-left: 16px;
				width: 100%;
			}

			.is-select {
				color: #409eff;
				background-color: #f0f7ff;
			}

			.el-tree_item_content {
				width: 100%;
				height: 32px;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.activeIcon {
					transform: rotate(90deg);
				}

				.el-tree_icon {
					padding: 6px;
					width: 16px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					cursor: pointer;
					transition: transform .3s ease-in-out;
				}

				.activeText {
					color: #409eff;
				}

				.el-tree_label {
					font-size: 14px;
				}

				&:hover {
					background-color: #f5f7fa;
				}
			}
		}
	}
</style>
